<template>
  <video :id="name" :ref="name" controls autoplay muted width="240" height="340"></video>
</template>
<script>
import flvjs from "flv.js"
export default {
  name: 'flv-play',
  props: {
    name: {
      type: String,
      default: 'videoElement'
    },
    value: {
      type: String,
      default: 'Kobe Bryant'
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    console.log(this.$refs)

    setTimeout(() => {
      if (flvjs.isSupported()) {
        let videoElement = this.$refs[this.name]
        // let videoElement = document.getElementById(this.name)
        console.log(videoElement)
        let flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          url: this.value
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    }, 2000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
